﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓储管理系统首页</title>
    <!-- 引入Element Plus样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #409EFF;
            --success-color: #67C23A;
            --warning-color: #E6A23C;
            --danger-color: #F56C6C;
            --info-color: #909399;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }

        body {
            background-color: #f5f7fa;
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
        }

        .main-content {
            padding: 24px;
            width: 100%;
        }

        /* 统计卡片样式 */
        .header-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
            gap: 20px;
        }

        .stat-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 20px;
            width: calc(50% - 10px);
            transition: all 0.3s;
        }

        .chart-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 20px;
            transition: all 0.3s;
            margin-bottom: 24px;
        }

        .chart-title {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }

        /* 双饼图容器样式 */
        .double-pie-container {
            display: flex;
            gap: 20px;
            width: 100%;
        }

        .pie-section {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .pie-chart-container {
            display: flex;
            width: 100%;
            height: 320px;
            gap: 15px;
        }

        .pie-chart-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .chart-container {
            width: 100%;
            height: 240px;
        }

        .chart-details {
            flex: 0 0 280px;
            background-color: #f9fafc;
            border-radius: 8px;
            padding: 16px;
            border-left: 3px solid var(--primary-color);
            display: flex;
            flex-direction: column;
        }

        .details-title {
            font-size: 15px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eaecef;
        }

        .warehouse-list {
            flex: 1;
            overflow-y: auto;
            max-height: 160px;
        }

        .warehouse-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 6px;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.3s;
        }

            .warehouse-item:hover {
                background-color: rgba(64, 158, 255, 0.05);
            }

        .warehouse-info {
            flex: 1;
        }

        .warehouse-name {
            font-weight: 600;
            color: #303133;
            margin-bottom: 4px;
            font-size: 13px;
        }

        .warehouse-stats {
            display: flex;
            gap: 8px;
            font-size: 11px;
            color: var(--info-color);
        }

        .warehouse-value {
            text-align: right;
        }

        .quantity-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 4px;
        }

        .amount-value {
            font-size: 13px;
            color: var(--success-color);
            font-weight: 600;
        }

        .total-stats {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 2px solid #eaecef;
            background-color: rgba(64, 158, 255, 0.05);
            border-radius: 6px;
            padding: 10px;
        }

        .total-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .total-label {
            font-weight: 600;
            color: #303133;
            font-size: 13px;
        }

        .total-value {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 14px;
        }

        /* 其他原有样式 */
        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .stat-title {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
        }

        .stat-more {
            color: var(--primary-color);
            font-size: 14px;
            cursor: pointer;
        }

        .stat-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .stat-item {
            text-align: center;
            padding: 12px;
            background-color: #f9fafc;
            border-radius: 4px;
        }

        .stat-label {
            font-size: 14px;
            color: var(--info-color);
            margin-bottom: 6px;
            display: block;
        }

        .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
        }

        .stat-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-top: 6px;
        }

        .tag-in {
            background-color: rgba(64, 158, 255, 0.1);
            color: var(--primary-color);
        }

        .tag-out {
            background-color: rgba(230, 162, 60, 0.1);
            color: var(--warning-color);
        }

        .el-radio-button__inner {
            border-color: #eaecef;
            color: #606266;
        }

            .el-radio-button__inner:hover {
                color: var(--primary-color);
            }

        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
    </style>
</head>
<body>
    <div id="warehouse-app">
        <div class="main-content">
            <!-- 今日概况 & 昨日概况 -->
            <div class="header-stats">
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">今日概况</div>
                        <div class="stat-more">更多</div>
                    </div>
                    <div class="stat-group">
                        <div class="stat-item">
                            <div class="stat-label">入库单据</div>
                            <div class="stat-value">@ViewBag.TodayStats.InboundOrders</div>
                            <div class="stat-tag tag-in">入库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库数量</div>
                            <div class="stat-value">@ViewBag.TodayStats.InboundQuantity</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库金额</div>
                            <div class="stat-value">@ViewBag.TodayStats.InboundAmount.ToString("N2")</div>
                        </div>
                    </div>
                    <div class="stat-group">
                        <div class="stat-item">
                            <div class="stat-label">出库单据</div>
                            <div class="stat-value">@ViewBag.TodayStats.OutboundOrders</div>
                            <div class="stat-tag tag-out">出库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库数量</div>
                            <div class="stat-value">@ViewBag.TodayStats.OutboundQuantity</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库金额</div>
                            <div class="stat-value">@ViewBag.TodayStats.OutboundAmount.ToString("N2")</div>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">昨日概况</div>
                        <div class="stat-more">更多</div>
                    </div>
                    <div class="stat-group">
                        <div class="stat-item">
                            <div class="stat-label">入库单据</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.InboundOrders</div>
                            <div class="stat-tag tag-in">入库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库数量</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.InboundQuantity</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库金额</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.InboundAmount.ToString("N2")</div>
                        </div>
                    </div>
                    <div class="stat-group">
                        <div class="stat-item">
                            <div class="stat-label">出库单据</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.OutboundOrders</div>
                            <div class="stat-tag tag-out">出库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库数量</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.OutboundQuantity</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库金额</div>
                            <div class="stat-value">@ViewBag.YesterdayStats.OutboundAmount.ToString("N2")</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 库存占比双饼图在同一行 -->
            <div class="chart-card">
                <div class="double-pie-container">
                    <!-- 库存数量占比 -->
                    <div class="pie-section">
                        <div class="chart-title"><i class="el-icon-s-data"></i>库存数量占比</div>
                        <div class="pie-chart-container">
                            <div class="pie-chart-wrapper">
                                <div class="chart-container" id="stockQuantityChart"></div>
                            </div>
                            <div class="chart-details">
                                <div class="details-title">仓库库存数量明细</div>
                                <div class="warehouse-list" id="quantityDetailsList">
                                    <!-- 动态生成仓库列表 -->
                                </div>
                                <div class="total-stats">
                                    <div class="total-item">
                                        <span class="total-label">总库存数量:</span>
                                        <span class="total-value" id="totalQuantity">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 库存金额占比 -->
                    <div class="pie-section">
                        <div class="chart-title"><i class="el-icon-s-data"></i>库存金额占比</div>
                        <div class="pie-chart-container">
                            <div class="pie-chart-wrapper">
                                <div class="chart-container" id="stockAmountChart"></div>
                            </div>
                            <div class="chart-details">
                                <div class="details-title">仓库库存金额明细</div>
                                <div class="warehouse-list" id="amountDetailsList">
                                    <!-- 动态生成仓库列表 -->
                                </div>
                                <div class="total-stats">
                                    <div class="total-item">
                                        <span class="total-label">总库存金额:</span>
                                        <span class="total-value" id="totalAmount">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 入库统计折线图 -->
            <div class="chart-card" style="width: 100%;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div class="chart-title"><i class="el-icon-s-data"></i>入库统计</div>
                    <el-radio-group v-model="timeRange" size="small" style="margin-top: -4px;" @@change="handleTimeRangeChange">
                        <el-radio-button label="7">最近7天</el-radio-button>
                        <el-radio-button label="30">最近30天</el-radio-button>
                        <el-radio-button label="365">最近一年</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="chart-container" id="inboundChart"></div>
            </div>
        </div>
    </div>

    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 引入Element Plus图标库 -->
    <script src="~/lib/element-plus/index.iife.js"></script>

    <script>
        const { WarningFilled } = ElementPlusIconsVue;
        const { createApp, ref, onMounted } = Vue;

        createApp({
            setup() {
                const timeRange = ref('7');
                const warehouseData = @Html.Raw(Json.Serialize(ViewBag.WarehouseData));

                // 渲染仓库明细列表
                const renderWarehouseDetails = () => {
                    const quantityList = document.getElementById('quantityDetailsList');
                    const amountList = document.getElementById('amountDetailsList');

                    // 计算总计
                    const totalQuantity = warehouseData.reduce((sum, item) => sum + item.quantity, 0);
                    const totalAmount = warehouseData.reduce((sum, item) => sum + item.amount, 0);

                    // 更新总计显示
                    document.getElementById('totalQuantity').textContent = totalQuantity.toLocaleString();
                    document.getElementById('totalAmount').textContent = '¥' + totalAmount.toFixed(2);

                    // 清空列表
                    quantityList.innerHTML = '';
                    amountList.innerHTML = '';

                    // 渲染每个仓库的明细
                    warehouseData.forEach(warehouse => {
                        // 数量明细
                        const quantityItem = document.createElement('div');
                        quantityItem.className = 'warehouse-item';
                        quantityItem.innerHTML = `
                            <div class="warehouse-info">
                                <div class="warehouse-name">${warehouse.warehouseName}</div>
                                <div class="warehouse-stats">
                                    <span>占比: ${warehouse.quantityPercentage.toFixed(1)}%</span>
                                </div>
                            </div>
                            <div class="warehouse-value">
                                <div class="quantity-value">${warehouse.quantity.toLocaleString()}</div>
                            </div>
                        `;
                        quantityList.appendChild(quantityItem);

                        // 金额明细
                        const amountItem = document.createElement('div');
                        amountItem.className = 'warehouse-item';
                        amountItem.innerHTML = `
                            <div class="warehouse-info">
                                <div class="warehouse-name">${warehouse.warehouseName}</div>
                                <div class="warehouse-stats">
                                    <span>占比: ${warehouse.amountPercentage.toFixed(1)}%</span>
                                </div>
                            </div>
                            <div class="warehouse-value">
                                <div class="amount-value">¥${warehouse.amount.toFixed(2)}</div>
                            </div>
                        `;
                        amountList.appendChild(amountItem);
                    });
                };

                // 初始化ECharts图表
                const initCharts = () => {
                    // 先渲染仓库明细
                    renderWarehouseDetails();

                    // 库存数量占比饼图
                    const quantityChart = echarts.init(document.getElementById('stockQuantityChart'));
                    const totalQuantity = warehouseData.reduce((sum, item) => sum + item.quantity, 0);

                    quantityChart.setOption({
                        title: {
                            text: `总库存\n${totalQuantity.toLocaleString()}`,
                            left: 'center',
                            top: '40%',
                            textStyle: { fontSize: 14, fontWeight: 'normal', lineHeight: 20 },
                            textVerticalAlign: 'middle'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        series: [{
                            name: '库存数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: warehouseData.map((item, index) => ({
                                name: item.warehouseName,
                                value: item.quantity,
                                itemStyle: {
                                    color: ['#409EFF', '#9F7AEA', '#F56C6C', '#FFB74D', '#607D8B', '#FFEB3B', '#20C997'][index % 7]
                                }
                            }))
                        }]
                    });

                    // 库存金额占比饼图
                    const amountChart = echarts.init(document.getElementById('stockAmountChart'));
                    const totalAmount = warehouseData.reduce((sum, item) => sum + item.amount, 0);

                    amountChart.setOption({
                        title: {
                            text: `总金额\n¥${totalAmount.toFixed(2)}`,
                            left: 'center',
                            top: '40%',
                            textStyle: { fontSize: 14, fontWeight: 'normal', lineHeight: 20 },
                            textVerticalAlign: 'middle'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
                        },
                        series: [{
                            name: '库存金额',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: warehouseData.map((item, index) => ({
                                name: item.warehouseName,
                                value: item.amount,
                                itemStyle: {
                                    color: ['#409EFF', '#9F7AEA', '#F56C6C', '#FFB74D', '#607D8B', '#FFEB3B', '#20C997'][index % 7]
                                }
                            }))
                        }]
                    });

                    // 入库统计折线图
                    const inboundChart = echarts.init(document.getElementById('inboundChart'));
                    const inboundData = @Html.Raw(Json.Serialize(ViewBag.InboundChartData));

                    const dates = inboundData.map(item => item.date);
                    const quantities = inboundData.map(item => item.quantity);
                    const amounts = inboundData.map(item => item.amount);

                    const maxQuantity = Math.max(...quantities, 1);
                    const maxAmount = Math.max(...amounts, 1);

                    inboundChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            formatter: params => {
                                const param = params[0];
                                return `${param.name}<br/>入库数量：${param.value[0]}<br/>入库金额：¥${param.value[1].toFixed(2)}`;
                            }
                        },
                        legend: { data: ['数量', '金额'], right: 10 },
                        xAxis: {
                            type: 'category',
                            data: dates
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量',
                                min: 0,
                                max: maxQuantity * 1.2,
                                position: 'left'
                            },
                            {
                                type: 'value',
                                name: '金额',
                                min: 0,
                                max: maxAmount * 1.2,
                                position: 'right'
                            }
                        ],
                        series: [
                            {
                                name: '数量',
                                type: 'bar',
                                data: quantities,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#409EFF' },
                                        { offset: 1, color: '#66b1ff' }
                                    ])
                                }
                            },
                            {
                                name: '金额',
                                type: 'line',
                                yAxisIndex: 1,
                                data: amounts,
                                lineStyle: { color: '#67C23A' },
                                symbol: 'circle',
                                symbolSize: 8,
                                itemStyle: {
                                    color: '#67C23A',
                                    borderColor: '#fff',
                                    borderWidth: 2
                                }
                            }
                        ],
                        grid: { left: '3%', right: '4%', bottom: '3%', top: '6%', containLabel: true }
                    });
                };

                // 时间范围变化处理
                const handleTimeRangeChange = (value) => {
                    // 这里可以添加加载新数据的逻辑
                    console.log('时间范围变化:', value);
                };

                onMounted(() => {
                    initCharts();
                });

                return {
                    timeRange,
                    handleTimeRangeChange
                };
            }
        })
        .use(ElementPlus, { icons: { WarningFilled } })
        .mount('#warehouse-app');
    </script>
</body>
</html>